<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mark {
        color: red;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app" class="old">id 为 app 的元素</div>
    <div id="app" class="item">class 包含 item 的元素</div>
    <div class="item" name="mydiv">class 包含 item 的元素</div>
    <div class="item" name="mydiv">class 包含 item 的元素</div>

    <script>
      // 获取网页元素
      console.log(window);
      console.log(document);

      // 根据 id 获取单个元素
      let app = document.getElementById("app");
      // 根据 name 属性获取元素
      document.getElementsByName("mydiv");
      // 根据 class 属性获取元素
      let items = document.getElementsByClassName("item");
      // 根据标签名获取元素
      document.getElementsByTagName("div");

      // 根据 css 选择器获取单个元素
      document.querySelector("body div.item");
      // 根据 css 选择器获取多个元素
      let all = document.querySelectorAll("#app");
      console.log(all);

      /*
          操作元素的属性
          - 获取属性  元素.属性名   元素.getAttribute("属性名")
          - 设置属性 元素.属性名 = 属性值  元素.setAttribute("属性名", "属性值")
          设置元素文本 元素.innerText = "文本内容"
          设置元素HTML 元素.innerHTML = "<h1>标题</h1>"
          设置元素value 元素.value = "值"

          操作元素的样式
            - 获取样式 元素.style.样式名
            - 设置样式 元素.style.样式名 = 样式值
            设置元素的类名 元素.className = "类名" 【不推荐】
            元素.classList.add("类名")
            元素.classList.remove("类名")
            元素.classList.toggle("类名") // 切换类名
      */
      app.setAttribute("name", "myapp");
      app.innerText = "<b>你好</b>";
      //   app.innerHTML = "<b>你好</b>";
      //   console.log(app.innerHTML);
      //   app.className = "mark";

      app.classList.add("mark");

      //   app.style.color = "red";
      //   app.style.backgroundColor = "yellow";
    </script>
  </body>
</html>
